import React from 'react'
import QueueAnim from 'rc-queue-anim'
import PubSub from 'pubsub-js/src/pubsub'
import {message,Icon} from 'antd'
import config from './../libs/config.js'

import '../styles/grouplist.scss'

export default class grouplist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            records: []
        }
    }
    
    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','back')
        PubSub.publish('updateTitle','牌局详情')

        var roundid = this.props.location.query.roundid

        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        },function() {
            var hide = message.loading('加载中...',0)
            $.ajax({
                url: config.server_host + '/api/matchs',
                type: 'get',
                data: {
                    roundid: roundid,
                    user: t.state.objAccount.user,
                    platform: t.state.objAccount.platform
                },
                success: function(data) {
                    if (data.code === 200) {
                        t.setState({
                            records: data.data
                        })
                        hide()
                    }
                    // TODO: 更新title需要更优雅的方式
                    try {
                        PubSub.publish('updateTitle','牌局: ' + t.state.records[0].title)
                    }catch(e) {
                        console.log(e)
                    }
                    
                }
            })
        })
    }

    handleDetail(rowid) {
        window.location.href = "#/detail?rowid=" + rowid
    }

    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box" key="a">
                    <div className="flex flex-1 pkl-grouplist">
                        {
                            (function() {
                                var nodes = [];
                                for(let i = 0; i < t.state.records.length; ++i) {
                                    var item = t.state.records[i];
                                    var mv = unescape(item.match_name.replace(/\\\\/g,'%').replace(/\\/g,'%'));
                                    var d = document.createElement('p')
                                    d.innerHTML = mv
                                    var mname = '';
                                    try {
                                        var obj = JSON.parse(d.innerText)
                                        mname = `${obj.name}以${obj.rank}${obj.type === 2 ? '获胜' : '失败'}`
                                    } catch(e) {
                                        mname = d.innerText
                                    }
                                    nodes.push(
                                        <div className="line " onClick={t.handleDetail.bind(t,item.rowid)}>   
                                            <span>{mname}</span>
                                            <span>
                                                {
                                                    (function(){
                                                        // TODO: 计算单手盈亏 需要浩宇给我数据 而不是我自己算
                                                        // for(var i = 0; i < item.match.showdown.player.length; ++i) {
                                                        //     if (item.match.table.seat[item.match.showdown.player[i].seatNumber-1].playerid  === item.userinfo.playerid) {
                                                        //         return (item.match.showdown.player[i].action)
                                                        //     }
                                                        // }
                                                    })()
                                                }
                                            </span>
                                            <Icon type="right" />
                                        </div>
                                    )   
                                }
                                return nodes;
                            })()
                        }
                        {   
                            t.state.records.length === 0 ? (function(){
                                return (
                                    <div className="line">暂无数据</div>
                                )
                            })() :  (function(){
                                return (
                                    <div/>
                                )
                            })()
                        }
                    </div>
                </div>
            </QueueAnim>
        )
    }
}
